<template>
    <div>
        <!--  头部部分，使用面包屑  -->
        <div class="header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item >图书管理</el-breadcrumb-item>
                <el-breadcrumb-item>所有图书</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card>
            <el-row :gutter="25">
                <el-col :span="10">
                    <!-- 搜索添加 -->
                    <el-input placeholder="请输入要搜索的图书名称" v-model="BookVO.bname" clearable @clear="findbook">
                        <el-button slot="append" icon="el-icon-search" @click="findbook"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="show" icon="el-icon-plus" size="medium">添加书籍</el-button>
                </el-col>
            </el-row>
            <BookAdd :addOrUpdateVisible="addOrUpdateVisible"   @changeShow="showAddOrUpdate" ref="addOrUpdateRef"> </BookAdd>
            <UpdateBook :addOrUpdateVisible1="addOrUpdateVisible1"

                        @change="showAddOrUpdate1" ref="addOrUpdateRef1"></UpdateBook>
        </el-card>
        <!--     表格部分   -->
        <el-table
                ref="multipleTable"
                class="table"
                :data="tableData"
                height="460"
                border
                style="width: 100%;height:460px"
                >
            <el-table-column
                    sortable
                    prop="id"
                    label="#"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="bid"
                    label="图书编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="图书名称">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="roomName"
                    label="图书室名称">
            </el-table-column>
            <el-table-column
                    prop="roomAdress"
                    label="图书室位置">
            </el-table-column>
            <el-table-column
                    prop="bookType"
                    label="图书的类型">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="图书的数量"
            style="font-size: 10px;font-weight: bold">
            </el-table-column>
            <el-table-column label="操作" width="250">
                <!--  增加一个作用域插槽来获取id    -->
                <template slot-scope="scope">
                    <el-button type="success" size="small" @click="update(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(scope.row.bid)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--   分页部分     -->
        <el-pagination
                class="foot"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="BookVO.currentPage"
                :page-sizes="[7, 10, 15, 20]"
                :pageSize="BookVO.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>


</template>

<script>
    //引入子组件
    import BookAdd from "./BookAdd";
    import UpdateBook from "./UpdateBook";
    export default {
        inject:['reload'],
        created() {
            //页面已加载就获取所有图书信息
            this.getBookList();
        },
        //使用子组件
        components: {BookAdd,UpdateBook },
        data() {
            return {
                total:1,
                tableData: [],
                BookVO:{
                    bname:'',
                    currentPage: 1,
                    pageSize:7,
                },
                // 控制弹窗的显示与隐藏
                addOrUpdateVisible: false,
                addOrUpdateVisible1: false,
                edtId:1,
                multipleSelection: []
            }
        },
        methods: {
            //获取所有的图书
            async  getBookList(){
              const{data:res}=await this.$http({
                  url:"book/findpage1",
                  params:{
                      currentPage:this.currentPage,
                      pageSize:this.pageSize
                  },
              });
              this.tableData=res.data.recodes;
              this.total=res.data.total;
            },
            //每页大小发生变化时
            handleSizeChange(val) {
                this.pageSize=val;
                this.getBookList();
            },
            //当前页发生变化时
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getBookList();
            },
            //根据书名查询图书信息
           async findbook(){
                const {data:res}=await this.$http.post('book/getBookPage',this.BookVO);
                console.log(res)
                if(res.code===20001){
                    this.$message.error("对不起，您查询的书籍"+this.BookVO.bname+"不存在");
                }else{
                    this.tableData=res.data.recodes
                    this.total=res.data.total
                }

            },
            // 点击添加按钮 显示弹窗组件
            show () {
                this.$refs.addOrUpdateRef.getList();
                this.$refs.addOrUpdateRef.getType();
                this.addOrUpdateVisible = true
            },
            //点击修改按钮，显示弹窗
            update(row){
                //获取图书信息
                this.$refs.addOrUpdateRef1.getbooks(row.bid);
                //获取图书书室信息
                this.$refs.addOrUpdateRef1.getList(row.roomid);
                //获取图书类型信息
                this.$refs.addOrUpdateRef1.getType(row.btid);
                this.addOrUpdateVisible1 = true
            },
            // 监听 子组件弹窗关闭后触发，有子组件调用
            showAddOrUpdate (data) {
                if (data === 'false') {
                    this.addOrUpdateVisible = false
                } else {
                    this.addOrUpdateVisible = true
                }
            },
            showAddOrUpdate1 (data) {
                if (data === 'false') {
                    this.addOrUpdateVisible1 = false
                } else {
                    this.addOrUpdateVisible1 = true
                }
            },
            //删除
           async del(id){
               const{data:res}=await this.$http.get("book/findbyId",{params:{bid:id}});
               const  name=res.data.book.name;
               this.$confirm('你确定要删除'+name+'吗?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
                    this.$http.get("book/del",{params:{bid:id}}).then(res=>{
                        if(res.data.code===20000){
                            this.reload();
                            this.$message.success("删除成功");
                        }

                    });
               }).catch(() => {
                   this.$message({
                       type: 'info',
                       message: '已取消删除'
                   });
               });
           }

        },
    }
</script>

<style scoped lang="less">
    .header{
        margin-bottom: 15px;
    }
    .foot{
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .table{
        margin-top: 10px;
    }

    .el-dropdown {
        vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>
